
import { useIntersectionObserver } from '@vueuse/core'
//定义懒加载插件
export const lazyPlugin = {
        install(app) {
                //定义全局指令
                app.directive('img-lazy', {
                        mounted(el, binding) {
                                //el:指令绑定到的元素。这可以用于直接操作 DOM。
                                //binding:binding.value  指令等于号后面绑定的表达式的值
                                // console.log(el, 'el')
                                // console.log(binding, 'binding')
                                const { stop } = useIntersectionObserver(
                                        el,
                                        ([{ isIntersecting }]) => {
                                                // console.log(isIntersecting, 'isIntersecting')
                                                if (isIntersecting) {
                                                        //进入视口区域
                                                        el.src = binding.value
                                                        stop()
                                                }
                                        },
                                )
                        }
                })
        }
}